<template>
  <div>
    <el-row>
      <el-col :span="8">
        <el-form-item label="出运单号">
          <el-input v-model.trim="formData.code" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="运输方式">
          <el-select v-model="formData.shipment" clearable placeholder="运输方式" class="wfull" disabled>
            <el-option v-for="item of issignContract" :key="item.id" :label="item.dict_data_name" :value="`${item.id}`" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="起运港">
          <el-select v-model.trim="formData.shipment_port" clearable placeholder="起运港" class="wfull" disabled>
            <el-option v-for="(item, index) of departureData" :key="index" :label="item.dict_data_name" :value="`${item.id}`" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="目的港">
          <el-select v-model.trim="formData.destination_port" clearable placeholder="目的港" class="wfull" disabled>
            <el-option v-for="(item, index) of destineData" :key="index" :label="item.dict_data_name" :value="`${item.id}`" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="拼柜类型">
          <el-select v-model.trim="formData.lcl_type" clearable placeholder="拼柜类型" class="wfull" disabled>
            <el-option v-for="(item, index) of cabinetData" :key="index" :label="item.dict_data_name" :value="`${item.id}`" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="柜号">
          <el-input v-model.trim="formData.cabinet_no" disabled />
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="柜型">
          <el-select v-model.trim="formData.cabinet_type" clearable placeholder="柜型" class="wfull" disabled>
            <el-option v-for="(item, index) of cabinetList" :key="index" :label="item.dict_data_name" :value="`${item.id}`" />
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="8">
        <el-form-item label="封箱号">
          <el-input v-model.trim="formData.seal_no" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="船名航次">
          <el-input v-model.trim="formData.ships_name" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="货代">
          <!-- <el-input v-model.trim="formData.lforwarder_company" disabled /> -->

          <el-select v-model.trim="formData.lforwarder_company" clearable placeholder="货代" class="wfull" disabled>
            <el-option v-for="(item, index) of freightList" :key="index" :label="item.name" :value="`${item.id}`" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="装柜日期">
          <el-input v-model.trim="formData.loading_date" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="起运日期">
          <el-input v-model.trim="formData.shipment_date" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="预计到仓日期">
          <el-input v-model.trim="formData.arrive_date" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="提单号">
          <el-input v-model.trim="formData.bl_no" disabled />
        </el-form-item>
      </el-col>
      <el-col v-if="showEntityWarehouse" :span="8">
        <el-form-item label="建议实体仓">
          <el-input v-model.trim="formData.entity_warehouse" disabled />
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item label="备注">
          <el-input v-model.trim="formData.notes" disabled />
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    formData: {
      type: Object,
      default() {
        return {}
      }
    },
    showEntityWarehouse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      issignContract: [],
      departureData: [],
      destineData: [],
      cabinetData: [],
      cabinetList: [],
      freightList: []
    }
  },
  created() {
    const vm = this
    vm.getDic()
    vm.getFreightList()
  },
  methods: {

    // 获取货代列表
    getFreightList() {
      const vm = this
      const params = {
        page: 1,
        limit: 100000000,
        status: 1,
        type: 2
      }
      vm.$http.get('/lforwarder', { params }).then(res => {
        vm.freightList = res.data
      })
    },
    getDic() {
      const vm = this
      const dicParams = [{
        type: 'transport',
        key: 'issignContract',
        name: '运输方式'
      },
      {
        type: 'port',
        key: 'departureData',
        name: '起运港'
      },
      {
        type: 'destination',
        key: 'destineData',
        name: '目的港'
      },
      {
        type: 'load_type',
        key: 'cabinetData',
        name: '拼柜类型'
      },
      {
        type: 'cabinet_type',
        key: 'cabinetList',
        name: '柜型'
      }]
      const promiseArr = dicParams.map((e) => {
        return new Promise((resolve, reject) => {
          vm.$cache.getDic(e.type)
            .then((res) => {
              resolve({
                data: res,
                key: e.key
              })
            })
            .catch((err) => {
              reject(err)
            })
        })
      })
      Promise.all(promiseArr).then((res) => {
        res.forEach((e) => {
          vm[e.key] = e.data
        })
      })
    }
  }
}
</script>

<style>
</style>
